<template>
  <div class="zl-echart-config">
    <div class="right-row" v-for="bar in barWidths">
        <div class="r-tit">宽度</div>
        <div class="r-cnt">
          <Slider v-model="bar.value" @on-change="changeHandle(bar)"></Slider>
        </div>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  name: 'ZlBarWidth',
  data () {
    return {
    }
  },
  props: {
    graphOptions:{
        type:Object,
        default:function(){
            return {};
        }
    },
    graphType:{
        type:String
    }
  },
  computed: {
    barWidths() {
      let bw = []
      for (let i = 0; i < this.graphOptions.series.length; i++) {
        const series = this.graphOptions.series[i];
        bw.push({
          id: i,
          value: parseInt(series.barWidth || 0)
        })
      }
      return bw
    }
  },
  methods: {
    changeHandle(bar) {
      let seriesArr = []
      for (let i = 0; i < this.graphOptions.series.length; i++) {
        const series = this.graphOptions.series[i];
        if (bar.id === i) {
          seriesArr.push(Object.assign({}, series, {barWidth: bar.value + '%'}))
        } else {
          seriesArr.push(Object.assign({}, series))
        }
      }
      this.$emit('changeSeries', seriesArr)
    }
  }
}
</script>
<style rel="stylesheet/less" lang="less" scoped>
</style>
